<template>
  <div class="index">
	<div class="bg"></div>
	<header class="header">
		<div class="search">
		</div>
	</header>  
	<article class="container">
		<div class="center" >
			<div class="inner">
				<div class="content">
					<router-view name="content" ></router-view>
				</div>
				<div class="footer" >
					<router-view name="footer"></router-view>
				</div>
			</div>
		</div>
		<div class="left" >
			<div class="left-content">
				<router-view name="left"></router-view>
			</div> 
		</div>
		<div class="right" >
			<router-view name="right"></router-view>
		</div>
		
	</article>
  </div>
</template>

<script>
export default {
  name: 'Index',
  components: {
  },
  computed:{
  },
  data:()=>{
	return{
		activeDate : 0
	}
  },
  mounted() {
  }
}
</script>

<style lang="stylus">
.bg
	position fixed
	top 0
	width 100%
	height 220px
	background-image url(../assets/630.jpg)
	background-size cover
	background-position center
	background-repeat no-repeat
	z-index 0
	opacity .1
.header
	width 100%
	height 80px
	display flex
	align-items center
	.search
		width 500px
		margin 0 auto
	

/* 双飞翼布局 */
wing-left=200px;
wing-right=280px;
content-max-width = 1200px;
content-min-width = 600px;
.container{
	min-width:content-max-width;
	max-width: content-max-width;
	margin: 0 auto;
	overflow: auto;
} 
.left{
	float:left;
	width:wing-left;
	margin-left:-100%
	position relative
}
.left-content{
	position: fixed;
	top: 80px;
	width: wing-left;
}
.center{
	float:left;
	width:100%;
}
.center .inner{
	margin:0 wing-right 0 wing-left;
	padding 0 15px
}
.right{
	float:left;
	width:wing-right;
	margin-left:-(wing-right);
	z-index 100
	position relative
}


</style>
